<template>
  <div class="the-list">

    <div class="panel-search">
      <el-form inline :model="table.query" class="demo-form-inline">
        <el-form-item label="举报对象">
          <el-select v-model="table.query.status">
            <el-option label="全部" value="" />
            <el-option v-for="item in feedbackList.status" :key="item.key" :label="item.name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tableFn.onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="panel-table">
      <div class="table-head">
        <div>
         意见反馈列表
        </div>
      </div>
      <el-table :data="table.list" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" style="width: 100%;" border>
        
        <el-table-column prop="createdAt" label="创建时间" width="160px"/>
        <el-table-column prop="nickname" label="提交用户">
        <template #default="{row}">
          <div class="isLink" @click="gotoUserDetail(row.customerId)">
            {{row.nickname}}<br>
            {{row.phone}}
          </div>
        </template>
      </el-table-column>
        <el-table-column prop="content" label="意见反馈内容">
          <template #default="{row}">
            <el-tooltip effect="light" placement="top" :show-after="300">
              <template #content>
                <div style="max-width: 600px;">
                  {{row.content}}
                </div>
              </template>
              <div class="isBigText">{{row.content}}</div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="feedbackImages" label="附加图片">
          <template #default="{row}">
            <template v-for="(url,index) in row.feedbackImages||[]" :key="index">
              <div v-if="url" @click="imageViewer({initialIndex: indx,urlList: row.feedbackImages||[]});" style="display:inline-block;margin:0 2px;">
                <el-image style="width: 42px;height: 42px;display:block;background:#ededed;font-size:12px;" fit="cover" :src="url">
                  <template #error>
                    <div style="color:#aaaaaa;line-height:42px;text-align:center;">失败</div>
                  </template>
                </el-image>
              </div>
            </template>
          </template>
        </el-table-column>

        <el-table-column prop="device" label="机型" width="100px" />
        <el-table-column prop="osVersion" label="系统版本" width="100px" />
        <el-table-column prop="appVersion" label="app版本" width="80px" />
        <el-table-column prop="status" label="状态" width="80px">
          <template #default="{row}">
            <span :class="'color-'+['red','green'][row.status]">{{getItemFromArray(feedbackList.status,row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="操作人" width="120px"/>
        <el-table-column prop="type" label="类型" width="120px">
          <template #default="{row}">
          <span>{{getItemFromArray(feedbackList.type,row.type)}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120px" align="center">
          <template #default="{row}">
            <el-button :disabled="row.status===1" size="small" type="primary" plain @click="tableFn.setFeedbackStatus(row)">标记为已读</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
      <pagination :total="table.total" v-model:page="table.query.page" v-model:limit="table.query.pageSize" @pagination="tableFn.getTableData" />
      </div>

    </div>

  </div>
</template>

<script setup>
import { reactive } from "vue";
import { getFeedbackList,updateFeedbackStatus }  from "@/api/operation.js";
import { useRouter } from "vue-router";
import Pagination from "@/components/Pagination";

import { feedbackList,getItemFromArray,gotoUserDetail }  from "@/utils/tool.js";
import { ElMessage } from "element-plus";
import imageViewer from "@/components/imageViewer/index2";

const router = useRouter();

// 表格功能模块，包括搜索，分页等
const { $data: table, $fn: tableFn } = (() => {
  const backup = {
    query: {
      status: "",//	处理状态 0、未处理；1、已处理
      pageSize: 10,
      page: 1,
    },
  };

  const $data = reactive({
    query: { ...backup.query },
    list: [],
    total: 0,
  });
  const $fn = {
    getTableData() {
      getFeedbackList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items;
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableData();
    },
    onSubmit() {
      $fn.getTableData();
    },
    setFeedbackStatus(row){
      updateFeedbackStatus(row.id).then(res=>{
        if(res.code===0){
          ElMessage.success("标记成功！");
          $fn.getTableData();
        }else{
          ElMessage.error("标记失败！");
        }
      })
    }
  };

  $fn.getTableData();

  return {
    $data,
    $fn,
  };
})();
</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
</style>